<template>
  <div class="form-container">
    <!-- 按钮区域 -->
    <div class="button-group">
      <!-- 只有在非分享链接打开的页面中显示分享按钮 -->
      <el-button v-if="!isSharedForm" type="primary" @click="generateShareLink">分享</el-button>
      <!-- 在所有页面中显示保存按钮 -->
      <el-button type="success" @click="saveForm">保存</el-button>
    </div>
    <!-- 表单内容 -->
    <el-form ref="formRef" :model="form" label-width="80px">
      <el-form-item label="姓名">
        <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
      </el-form-item>
      <el-form-item label="电话">
        <el-input v-model="form.phone" placeholder="请输入电话"></el-input>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
      </el-form-item>
      <el-form-item label="地址">
        <el-input v-model="form.address" placeholder="请输入地址"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';

// 表单数据
const form = ref({
  name: '',
  phone: '',
  email: '',
  address: ''
});

// 是否是通过分享链接打开的表单
const isSharedForm = ref(false);

// 使用简单的加密函数（示例中使用 Base64 编码）
const encrypt = (data: string): string => {
  return btoa(encodeURIComponent(data));
};

// 使用简单的解密函数（示例中使用 Base64 解码）
const decrypt = (data: string): string => {
  return decodeURIComponent(atob(data));
};

// 生成分享链接
const generateShareLink = () => {
  const { name, phone, email, address } = form.value;
  if (!name || !phone) {
    ElMessage.error('请输入姓名和电话号码');
    return;
  }
  // 对姓名和电话号码进行加密
  const encryptedName = encrypt(name);
  const encryptedPhone = encrypt(phone);
  // 构造分享链接，包含加密后的姓名和电话，以及其他信息
  const shareLink = `${window.location.origin}/form?data=${encryptedName}-${encryptedPhone}&email=${email}&address=${address}`;
  // 提示用户分享链接
  ElMessage.success(`分享链接已生成：${shareLink}`);
  // 可以将链接复制到剪贴板
  navigator.clipboard.writeText(shareLink).then(() => {
    ElMessage.success('链接已复制到剪贴板');
  }).catch(err => {
    console.error('复制失败：', err);
  });
};

// 保存表单数据
const saveForm = () => {
  // 这里可以添加表单校验逻辑
  if (!form.value.name || !form.value.phone) {
    ElMessage.error('姓名和电话不能为空');
    return;
  }
  // 调用后端接口保存表单数据
  console.log('表单数据已保存：', form.value);
  // 以下为发送请求的代码示例，暂时注释掉
  // axios.post('/api/form/save', form.value).then(() => {
  //   ElMessage.success('表单保存成功');
  // }).catch(err => {
  //   console.error('保存失败：', err);
  //   ElMessage.error('表单保存失败');
  // });
};

// 页面加载时，检查是否有加密后的数据参数以及其他信息参数
onMounted(() => {
  const urlParams = new URLSearchParams(window.location.search);
  const dataParam = urlParams.get('data');
  const emailParam = urlParams.get('email');
  const addressParam = urlParams.get('address');
  if (dataParam) {
    // 对加密后的数据进行解密
    const [encryptedName, encryptedPhone] = dataParam.split('-');
    if (encryptedName && encryptedPhone) {
      const decodedName = decrypt(encryptedName);
      const decodedPhone = decrypt(encryptedPhone);
      form.value.name = decodedName;
      form.value.phone = decodedPhone;
    }
    // 如果是通过分享链接打开的表单，标记为共享表单
    isSharedForm.value = true;
  }
  // 填充其他信息
  if (emailParam) {
    form.value.email = emailParam;
  }
  if (addressParam) {
    form.value.address = addressParam;
  }
});
</script>

<style scoped>
.form-container {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
}

.button-group {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
</style>